import React from 'react'
import { useLocation,useNavigate } from 'react-router-dom';
import {  TabBar } from 'antd-mobile';
import { AppOutline, MessageOutline, UserOutline, SearchOutline} from 'antd-mobile-icons';
export default function NavBar() {
    const navigate = useNavigate();
    const location = useLocation();
    const { pathname } = location;
    const setRouteActive = (value) => {
        navigate(value);
    };
    const tabs = [
        {
            key: '/home',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/search',
            title: '找房',
            icon: <SearchOutline />,
        },
        {
            key: '/message',
            title: '资讯',
            icon: <MessageOutline />,
        },
        {
            key: '/me',
            title: '我的',
            icon: <UserOutline />,
        },
    ];
    return (<TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
        {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title} />))}
    </TabBar>);
}
